<template>
  <div>
    <h1 class="lp-h1">
      在下，正是范闲
      <span class="lp-h1__inner">正史从此开始</span>
      <span class="lp-h1--success">点我开始正文</span>
    </h1>
  </div>
</template>

<script setup lang="ts">
// BEM架构 + layout布局
/* 
  以element-ui为例  el-input__inner--primary
  1. 块名：el-input
  2. 元素名：input__inner
  3. 修饰符：--primary
*/

/* 
  <div  class="lp-block"></div>

  .lp-block {
    display: block;
  }

  @include xxxx  mixin方法的调用
  #{}       插值语法;
  @content; 占位符  插槽
*/

/* $E: #{$namespace + $block-sel + $elem-sel + $el};
  .#{$E} {
    @content;
  }
*/

/* 
  .lp-block__elem {}

  $selector: &;     // 直接获取当前选择器
  @at-root {}       // 跳出父级作用域
  &                 // 当前选择器
*/

</script>

<style lang="scss">
  @include b(h1) {
    color: red;
    @include e(inner) {
      color: green;
    }
    @include m(success) {
      color: yellow;
    }
  }
</style>